<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>部门列表</title>
<link rel="stylesheet" href="res/layui/css/layui.css">
<script src="res/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="res/layui/layui.js"></script>
<style>
tbody [data-field=dosName]:HOVER {
	background-color: #fff;
	cursor:pointer;
}

</style>
</head>
<body>
	
	<div style="padding-top: 10px; margin-bottom: -10px;">
		药品种类：
		
		<div class="layui-inline" style="width: 140px;">
		<form class="layui-form" >
					<select id="typeId" name="typeId" lay-verify="">
						<option value="">请选择</option>
					</select>
					</form>

		</div>
		
		药品名称：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="wareName" id="wareName"
				autocomplete="off">
		</div>
		厂家名称：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="wareFactory" id="wareFactory"
				autocomplete="off">
		</div>
	</div>
	<div style="margin-top: 20px">
	价格区间：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="maxMoney" id="maxMoney"
				autocomplete="off">
		</div>
		~
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="minMoney" id="minMoney"
				autocomplete="off">
		</div>
		
		<button class="layui-btn"  onclick="reloadData()">搜索</button>
		<button data-type="auto" class="layui-btn layui-btn-normal"
			onclick="showAddOrUpdate()">新增</button>
		<form action="ware/downExcel.action" method="post" style="display:inline;">
			<input type="hidden" id="jsonStr" name="jsonStr" />
			<button data-type="auto" class="layui-btn layui-btn-normal">导出Excel</button>
		</form>
		<button data-type="auto" class="layui-btn layui-btn-normal" onclick="noneDiv()">上传Excel</button>
	</div>
	
	<table class="layui-table" id="department" lay-filter="demo"></table>
	
	<div id="noneDiv" style="display: none;padding-top: 80px;">
			<div align="center" style="margin: 40px;">
				<h2>Excel文件格式如下（若格式不正确可能导致导入失败）！</h2>
				<img alt="" src="images/ExcelStyle.png" style="margin-top: 20px">
			</div>
			<form enctype="multipart/form-data" id="batchUpload"  action="user/upload" method="post"  align="center" class="form-horizontal" style="display: inlne;">    
			    <button class="layui-btn" id="uploadEventBtn" type="button" >选择文件</button> 
			    <input type="file" name="file"  style="width:0px;height:0px;" id="uploadEventFile">
			    <input id="uploadEventPath"  disabled="disabled"  type="text" placeholder="请选择excel表" class="layui-input" style="border: 1px solid #e6e6e6; width: 200px; display: inline;" >                                 
				<input class="layui-btn" type="button" onclick="ware.uploadBtn()" onclick="staff.uploadBtn()" value="上传"/>
			</form>
			<!-- <button type="button" class="btn btn-success btn-sm"  onclick="ware.uploadBtn()" >上传</button> -->
		</div>

	<script type="text/html" id="demo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	
	<script type="text/javascript">
		
		var uploadExcelStr = "";
	
		var Ware = function(){  
		      
		    this.init = function(){
		          
		        //模拟上传excel  
		         $("#uploadEventBtn").unbind("click").bind("click",function(){  
		             $("#uploadEventFile").click();  
		         });  
		         $("#uploadEventFile").bind("change",function(){  
		             $("#uploadEventPath").attr("value",$("#uploadEventFile").val());  
		         });
		          
		    };  
		    //点击上传按钮  
		    this.uploadBtn = function(){  
		        var uploadEventFile = $("#uploadEventFile").val();  
		        if(uploadEventFile == ''){  
		        	layer.msg("请选择excel,再上传");  
		        }else if(uploadEventFile.lastIndexOf(".xls")<0){//可判断以.xls和.xlsx结尾的excel  
		        	layer.msg("只能上传Excel文件");  
		        }else{  
		            var url =  'ware/uploadExcel.action';
		            var formData = new FormData($('#batchUpload')[0]);  
		            ware.sendAjaxRequest(url,'POST',formData);
		        }  
		    };  
		      
		    this.sendAjaxRequest = function(url,type,data){  
		        $.ajax({  
		            url : url,  
		            type : type,  
		            data : data,  
		            success : function(result) {  
		            	if(result.state==1){
		            		layer.msg("excel数据导入成功");  
		            		layer.close(uploadIndex);
		            		table.reload('typeId');
		            	}
		            },  
		            error : function() {  
		                layer.msg( "excel上传失败");  
		            },  
		            cache : false,  
		            contentType : false,  
		            processData : false  
		        });  
		    };  
		}  
		
		var ware;  
		
		function noneDiv(){
			if(uploadExcelStr==""){
				uploadExcelStr = $("#noneDiv").html();
			}
			uploadIndex = layer.open({
				type : 1//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '85%', '70%' ],
				title : "药品导入"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : uploadExcelStr,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
			$("#noneDiv").html("");
			ware = new Ware();  
			ware.init();
		}
		
		</script>    
	
	
	<script type="text/javascript">
		var table;

		var loadIndex;

		var openIndex;

		function showAddOrUpdate(wareId) {
			var url;
			if (wareId != null) {
				url = "pages/wareForm.jsp?wareId=" + wareId;
			} else {
				url = "pages/wareForm.jsp";
			}
			openIndex = layer.open({
				type : 2//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '85%', '70%' ],
				title : "药品维护"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : url,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : false//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}

		function deleteRec(wareId, i) {
			var url = "ware/delete.action";
			$.post(url, {
				"wareId" : wareId
			}, function(info) {
				layer.msg(info.mes);
				layer.close(i);
			});
		}
		var form;
		layui.use(['form'], function() {
			form = layui.form;
			//监听提交
			form.on('submit(demo)', function(data){
				return false;
			});
			
		});
		layui.use([ 'table' ], function() {
			
			table = layui.table;
			loadIndex = layer.load();
			//方法级渲染
			table.render({
				loading : false,
				id : 'typeId',
				page : true,
				height : 383,
				size : "sm",
				elem : '#department',
				url : 'ware/showAll.action',
				method : 'post',
				where : {

				},
				cols : [ [ {
					field : 'wareName',
					title : '药品名称',
					width : 150,
					align : 'center',
					sort : false
				},{
					field : 'typeName',
					title : '药品种类',
					width : 80,
					align : 'center',
					sort : false
				}, {
					field : 'wareFactory',
					title : '厂家',
					width : 130,
					align : 'center',
					sort : false
				}, {
					field : 'norma',
					title : '规格',
					width : 100,
					align : 'center',
					sort : false
				}, {
					field : 'wareMoney',
					title : '价格',
					width : 60,
					align : 'center',
					sort : false
				}, {
					field : 'dosName',
					title : '所需配料',
					width : 150,
					align : 'center',
					sort : false,
					templet: '#dep'
				},{
					field : 'warePhoto',
					title : '图片',
					width : 130,
					align : 'center',
					sort : false,
					templet: '#warePhoto'
				}, {
					fixed : 'right',
					width : 110,
					align : 'center',
					toolbar : '#demo'
				} ] ]

				,
				done : function(res, curr, count) {
					var jsonStr = JSON.stringify(res);
					$("#jsonStr").val(jsonStr);
					layer.close(loadIndex);//加载层关闭  
					$("tbody [data-field=dosName]").on("click",function(){
						var pl=$(this).find(".plList").val();						
						layer.open({
							type : 2//样式
							,
							skin : 'layui-layer-molv'//样式
							,
							area : [ '85%', '70%' ],
							title : "配料管理"//标题
							,
							id : 'pl' //防止重复弹出
							,
							content : "pages/batching.jsp?pl="+pl+"&wareId="+res.data[$(this).parent()[0].rowIndex].wareId,
							shade : [ 0.8, '#393D49' ] //显示遮罩
							,
							shadeClose : false//点击也能遮罩层关闭
							,
							anim : 2
						//弹出动画 
						});
					});
					$("tbody [data-field=warePhoto]").on("click",function(){
					var src = res.data[$(this).parent()[0].rowIndex].warePhoto;
					layer.open({
						type : 1,
						skin : 'layui-layer-molv',
						title : "",
						id : 'pl',
						content : "<img src='"+src+"' width='100%'/>",
						shade : [ 0.8, '#393D49' ],
						shadeClose : true,
						anim : 2,//弹出动画 
						time : 1500
					});
				});
				}
			});

			
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						var i = layer.load();
						deleteRec(data.wareId, i);
						obj.del();
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					showAddOrUpdate(data.wareId);
				}
			});
			
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		function reloadData(){
			table.reload('typeId', {
				where : {
					'typeId' : $("#typeId").val(),
					'wareName' : $("#wareName").val(),
					'wareFactory' : $("#wareFactory").val(),
					'maxMoney' : $("#maxMoney").val(),
					'minMoney' : $("#minMoney").val()
					
					
				}
			});
		}
		function loadType(){
			$.ajax({
				type: "POST",
				url: "wareType/showAll.action",
				data: null,
				async: false,
				error: function(){
					layer.mes("发生未知错误，请稍后再试！");
				},
				success: function(obj){
					var typeList=obj.data;
					for(var i=0;i<typeList.length;i++){
						var type=typeList[i];
						$("[name=typeId]").append("<option value="+type.typeId+">"+type.typeName+"</option>")
					}
				}
			});
		}
		$(function(){
			loadType();
		})
	</script>

	<script type="text/html" id="warePhoto">
  	<img src="{{d.warePhoto}}" height="20px">
</script>
<script type="text/html" id="dep">
	{{ d.dosName }} 
	{{# var dep=d.depList; var str=""; for(var i=0;i<dep.length;i++){str+="dosName="+dep[i].dosName+",dosCount="+dep[i].dosCount+",dosId="+dep[i].dosId+"_"; }  }}
	<input class="plList" type="hidden" value="{{ str }}"/>
</script>
</body>
</html>